<template>
  <div
    v-if="isExt"
    :style="styleExternalIcon"
    v-bind="$attrs"
    :class="svgClass"
    class="svg-icon"
  ></div>
  <IconifyIcon
    v-else
    :class="svgClass"
    :icon="iconName"
    v-bind="$attrs"
  ></IconifyIcon>
</template>

<script setup lang="ts">
import { Icon as IconifyIcon } from '@iconify/vue'
import { isExternal } from '@/utils/validate'

// Vue3.5 withDefaults 不能使用结构结构赋值 丧失相应式{ iconName, className }。defineProps可以使用结构赋值
// const props = withDefaults(
//   defineProps<{
//     iconName: string
//     className?: string
//   }>(),
//   {
//     className: ''
//   }
// )

// vue3.5 支持结构赋值
const { iconName, className = '' } = defineProps<{
  iconName: string
  className?: string
}>()

// 判断是不是外链
const isExt = computed(() => isExternal(iconName))

// 组合成的类名
const svgClass = computed(() =>
  className ? `svg-icon ${className}` : 'svg-icon'
)

// 如果是外链,通过mask 渲染svg图标
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${iconName}) no-repeat 50% 50%`,
  'mask-size': 'cover'
}))
</script>
